<template>
  <div class="vocabulary-practice">
    <el-skeleton :rows="5" animated v-if="loading" />
    <el-alert v-else-if="error" :title="error" type="error" show-icon :closable="false" />
    <div v-else>
      <MyHeaderInLesson :lesson="lesson" :moduleName="'词汇练习'" />

      <!-- 句子选择下拉框 -->
      <div class="sentence-selector" v-if="lesson && lesson.content && lesson.content.length > 1">
        <el-select v-model="currentSentenceIndex" placeholder="请选择句子" style="width: 100%" class="mosaic-text">
          <el-option
            v-for="(sentence, index) in lesson.content"
            :key="index"
            :label="`${index + 1}. ${sentence.english}`"
            :value="index"
          >
            <div class="sentence-option">
              <span class="sentence-number">{{ index + 1 }}.</span>
              <span class="sentence-text">{{ sentence.english }}</span>
            </div>
          </el-option>
        </el-select>
      </div>

      <!-- 词汇练习控制选项 -->
      <div class="vocabulary-options">
        <el-button @click="playPronunciation" :loading="audioLoading" class="control-button"> 发音 </el-button>
        <el-button @click="showAnswer" class="control-button"> 显示答案 </el-button>
        <el-button @click="nextVocabulary" class="control-button"> 下一个 </el-button>
        <el-button @click="resetExercise" class="control-button primary"> 重置 </el-button>
      </div>
      <el-alert type="error" v-if="errorMessage" :title="errorMessage" show-icon :closable="false" />

      <!-- 词汇信息展示区 -->
      <div class="vocabulary-info">
        <div class="phonetic-display" v-if="currentVocabulary.phonetic">
          <span>音标: {{ currentVocabulary.phonetic }}</span>
        </div>

        <div class="exercise-section">
          <el-card class="exercise-card">
            <template #header>
              <div class="card-header">
                <span>拼写练习:请根据音标拼写出单词</span>
              </div>
            </template>

            <div class="spelling-exercise">
              <el-input v-model="userSpelling" placeholder="请输入单词拼写" size="large" @keyup.enter="checkSpelling" />
              <div class="spelling-result" v-if="spellingResult !== null">
                <el-alert
                  :title="spellingResult ? '正确!' : '不正确，请再试一次'"
                  :type="spellingResult ? 'success' : 'error'"
                  show-icon
                  :closable="false"
                />
              </div>
              <el-button @click="checkSpelling" type="primary" class="check-button"> 检查 </el-button>
            </div>
          </el-card>

          <el-card class="exercise-card">
            <template #header>
              <div class="card-header">
                <span>选择练习:请选择正确的释义</span>
              </div>
            </template>

            <div class="choice-exercise">
              <el-radio-group v-model="userChoice" class="choice-group">
                <el-radio
                  v-for="(choice, index) in choices"
                  :key="index"
                  :label="index"
                  class="choice-item"
                  @change="checkChoice"
                >
                  {{ choice }}
                </el-radio>
              </el-radio-group>

              <div class="choice-result" v-if="choiceResult !== null">
                <el-alert
                  :title="choiceResult ? '正确!' : '不正确，请再试一次'"
                  :type="choiceResult ? 'success' : 'error'"
                  show-icon
                  :closable="false"
                />
              </div>
            </div>
          </el-card>
        </div>

        <div class="definition-display" v-if="currentVocabulary.meanings && currentVocabulary.meanings.length">
          <WordDetailDisplay :word-data="currentVocabulary" @play-pronunciation="playPronunciation" />
        </div>
        <div v-else>
          <p>暂无释义信息</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ElSkeleton, ElAlert, ElPageHeader, ElButton, ElInput, ElCard, ElRadioGroup, ElRadio } from 'element-plus'
import WordDetailDisplay from '../components/vocabulary/WordDetailDisplay.vue'
import { vocabularyPracticeMixin } from '@/mixins/vocabularyPractice'
import MyHeaderInLesson from '../components/layout/MyHeaderInLesson.vue'

export default {
  name: 'VocabularyPractice',
  components: {
    ElSkeleton,
    ElAlert,
    ElPageHeader,
    ElButton,
    ElInput,
    ElCard,
    ElRadioGroup,
    ElRadio,
    WordDetailDisplay,
    MyHeaderInLesson
  },
  mixins: [vocabularyPracticeMixin]
}
</script>

<style scoped lang="scss">
@use '../assets/styles/vocabularyPractice.scss';

.sentence-selector {
  margin: 20px 0;

  :deep(.el-select) {
    width: 100%;
  }

  :deep(.el-select-dropdown__item) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sentence-option {
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;

    .sentence-number {
      flex-shrink: 0;
      margin-right: 8px;
      font-weight: bold;
    }

    .sentence-text {
      flex-grow: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>